<template>
  <div class="score-visit page">
    <div class="main"  v-if="scoreItemMap&&scoreMap">
    <my-header :title="todo.title"  :date="parseTime(todo.date)"></my-header>
      <div class="act" style="margin-bottom: 20px" v-for="(act, index) in acts" :key="index">
      <label-location  v-if="act"  :location="act.address"></label-location>
      <span class="set-time" v-if="act"  >{{act.addressTime}}</span>
      <score-img class="plane" v-model="scoreMap['actImg' + (index + 1)]" :max="scoreItemMap['actImg' + (index + 1)].score"  :title="scoreItemMap['actImg' + (index + 1)].name" icon="iconsale" v-if="act" :imgs="act.actImg"></score-img>
      <span class="set-time" v-if="act"  >{{act.actTime}}</span>
      <score-txt class="plane" v-model="scoreMap['actInfo'+(index + 1)]" :max="scoreItemMap['actInfo'+(index + 1)].score"  :title="scoreItemMap['actInfo' + (index + 1)].name" icon="iconwanchenggoutong" v-if="act" :txt="act.actInfo"></score-txt>
      </div>
<!--      <label-location class="address"   v-if="acts[1]" style="margin-top: 20px" :location="acts[1].address"></label-location>-->
<!--      <span class="set-time" v-if="acts[1]" >{{acts[1].addressTime}}</span>-->
<!--      <score-img class="plane" v-model="scoreMap['actImg2']" :max="scoreItemMap['actImg2'].score"  :title="scoreItemMap['actImg2'].name" icon="iconsale" v-if="acts[1]" :imgs="acts[1].actImg"></score-img>-->
<!--      <span class="set-time" v-if="acts[1]" >{{acts[1].actTime}}</span>-->
<!--      <score-txt class="plane" v-model="scoreMap['actInfo2']" :max="scoreItemMap['actInfo2'].score"  :title="scoreItemMap['actInfo2'].name" icon="iconwanchenggoutong" v-if="acts[1]" :txt="acts[1].actInfo"></score-txt>-->

<!--      <label-location class="address"  v-if="acts[2]" :location="acts[2].address"></label-location>-->
<!--      <span class="set-time" v-if="acts[2]" >{{acts[2].addressTime}}</span>-->
<!--      <score-img class="plane" v-model="scoreMap['actImg3']" :max="scoreItemMap['actImg3'].score"  :title="scoreItemMap['actImg3'].name" icon="iconsale" v-if="acts[2]" :imgs="acts[2].actImg"></score-img>-->
<!--      <span class="set-time" v-if="acts[2]" >{{acts[2].actTime}}</span>-->
<!--      <score-txt class="plane" v-model="scoreMap['actInfo3']" :max="scoreItemMap['actInfo3'].score"  :title="scoreItemMap['actInfo3'].name"  icon="iconwanchenggoutong" v-if="acts[2]" :txt="acts[2].actInfo"></score-txt>-->
<!--    <score-txt class="plane" v-model="scores[6]" :title="names[6]" icon="iconwuliaoguanli" :txt="recordTxt"></score-txt>-->

    <score-img class="plane" v-model="scoreMap['sellNum']" :max="scoreItemMap['sellNum'].score"  :title="scoreItemMap['sellNum'].name" icon="iconic_saleperformance" :txt="todo.sellNum+''"></score-img>
    <score-img class="plane" v-model="scoreMap['sellImg']" :max="scoreItemMap['sellImg'].score"  :title="scoreItemMap['sellImg'].name" icon="iconic_saleperformance" :imgs="todo.sellImg"></score-img>
      <score-img class="plane" v-model="scoreMap['userNum']" :max="scoreItemMap['userNum'].score"  :title="scoreItemMap['userNum'].name" icon="iconxiaoshouguanli" :txt="todo.userNum+''"></score-img>
      <span class="set-time" >{{todo.sellTime}}</span>
    <score-txt class="plane" v-model="scoreMap['summary']" :max="scoreItemMap['summary'].score"  :title="scoreItemMap['summary'].name" icon="iconwanchenggoutong" :txt="todo.summary"></score-txt>

      <span class="set-time" style="margin-bottom: 20px">逗留时间 : {{perTime}}</span>
<!--      <span class="total-score">{{totalScore}}</span>-->
      <div @click="confirm" class="btns" v-show="canEdit">
      提交
    </div>
    </div>
  </div>
</template>

<script>
import myHeader from '../../components/header'
import scoreImg from '../../components/score-img'
import scoreTxt from '../../components/score-txt'
import labelLocation from '../../components/label-location'
import { parseTime } from '../../util/time'
import { list, score } from '../../api/score'
import { showConfirm, showCorrect, showAlert } from '../../dialog'
import { get } from '../../api/todo'
import { mapState } from 'vuex'

export default {
  created () {
    this.todoId = this.$route.query.id
    get(this.todoId).then(res => {
      this.todo = res.data
      this.acts = res.extra.acts
      console.log(this.acts)
      this.records = res.extra.records
    })
    list(this.todoId).then(res => {
      this.scoreItemMap = res.extra.scoreItemMap
      if (res.data && res.data.length > 0) {
        // this.scores = res.data
        this.scoreMap = res.extra.scoreMap
      } else {
        this.scoreMap = {}
        for (const k in this.scoreItemMap) {
          this.scoreMap[k] = {}
        }
        // this.scoreMap = this.scoreItemMap.map(item => {
        //   const m = {}
        //   m[item.val] = { point: 0 }
        //   return m
        // })
      }
    })
  },
  data () {
    return {
      todoId: null,
      todo: {},
      records: [],
      acts: [],
      scoreItemMap: null,
      scoreMap: null
    }
  },
  computed: {
    // totalScore () {
    //   Object.values(this.scoreItemMap).forEach(score => {
    //     console.log(score)
    //   })
    //   return 0
    // },
    ...mapState({
      userId: state => state.user.id
    }),
    canEdit () {
      return this.todo.userId !== this.userId && this.todo.status === 1
    },
    perTime () {
      if (!this.acts[0].addressTime) return 0
      if (!this.acts[0]) return ''
      const time = new Date(this.todo.doneTime).getTime() - new Date(this.acts[0].addressTime).getTime()
      return Math.floor(time / 1000 / 60) + '分钟'
    },
    recordTxt () {
      let txt = ''
      if (!this.records) return txt
      this.records.forEach(record => {
        txt += record.goodsName + record.number + '件,'
      })
      return txt
    }
  },
  methods: {
    imgName (index) {
      return `actImg${(index + 1)}`
    },
    parseTime (time) {
      return parseTime(time, '{y}-{m}-{d}')
    },
    confirm () {
      let totalScore = 0
      let flag = true
      Object.values(this.scoreMap).forEach(score => {
        if (score.point) {
          totalScore += parseInt(score.point)
        } else if (score.required) { // 没有评分但是需要评分
          flag = false
        }
      })
      if (!flag) {
        showAlert('请填写所有评分')
        return
      }
      showConfirm('是否确认提交', '当前总分' + totalScore).then(res => {
        if (!res) return
        score(this.todoId, this.scoreMap).then(res => {
          showCorrect('提交成功!').then(res => {
            this.$router.back()
          })
        })
      })
    }
  },
  components: {
    myHeader,
    scoreImg,
    scoreTxt,
    labelLocation
  }
}
</script>

<style scoped lang="stylus">
  .set-time
    font-size 11px
    color #B9B7C0
    line-height 11px
    display block
    margin 10px 10px
  .score-visit
    .address
      margin-top 20px
    .plane
      margin-top 11px
    .btns
      display flex
      align-items center
      justify-content center
      margin 20px 0
      height 44px
      background:rgba(12,147,79,1);
      border-radius:20px;
      dpr-font(15Px)
      color white

</style>
